import React, { useState, useEffect, memo } from "react";
import CreateIncludeNsTree from "@pkgs/Layout/CreateIncludeNsTree";
import useFormatMessage from "@pkgs/hooks/useFormatMessage";
import { NavLink } from "react-router-dom";
import { Menu } from "antd";
import _ from "lodash";
import { menuData } from "../config";
import type { MenuProps } from "antd/lib/menu";

const DiscoveryMenu: React.FC = (props) => {
  const intlFmtMsg = useFormatMessage();
  const params = _.get(props, "match.params");
  const { type } = params;
  const [current, setCurrent] = useState<string[]>(["stree"]);

  useEffect(() => {
    if (type) {
      setCurrent(type);
    }
  }, []);

  useEffect(() => {
    const { type } = params;
    if (type) {
      setCurrent(type);
    }
  }, [params])

  const menuClick: MenuProps["onClick"] = (e) => {
    const data = e.keyPath;
    setCurrent(data);
  };

  return (
    <div>
      <Menu mode="horizontal" onClick={menuClick} selectedKeys={current}>
        {menuData.map((item) => (
          <Menu.Item
            key={item.key}
            style={{ width: "150px", textAlign: "center" }}
          >
            <NavLink to={`/prometheus/discovery/${item.label}`}>
              {intlFmtMsg({
                id: `menu.mon.prometheus.discovery.${item.label}`,
              })}
            </NavLink>
          </Menu.Item>
        ))}
      </Menu>
    </div>
  );
};

export default memo(CreateIncludeNsTree((DiscoveryMenu), { visible: true }));
